<template>
  <div class="table" style="padding:20px">
    <div style="overflow: auto; height: 850px">
      <div style="padding-block-end: 10px">
        <el-input id="task_name" v-model="var_page.local_variable_name" placeholder="请输入变量名称" style="width: 800px; padding-right: 10px;" />
        <el-button type="primary" @click="getvar_list">搜索</el-button>
        <el-button style="float: right" type="success" @click="add_dialog">新增变量</el-button>
      </div>
      <div>
        <el-table
          :data="table_data"
          element-loading-text="Loading"
          border
          fit
          highlight-current-row
          style="float:left;width:100%"
        >
          <el-table-column align="center" label="ID">
            <template slot-scope="scope">
              {{ scope.row.local_variable_id }}
            </template>
          </el-table-column>
          <el-table-column label="变量名称">
            <template slot-scope="scope">
              {{ scope.row.local_variable_name }}
            </template>
          </el-table-column>
          <el-table-column label="变量路径">
            <template slot-scope="scope">
              {{ scope.row.local_variable_data }}
            </template>
          </el-table-column>
          <el-table-column class-name="status-col" label="变量结果" align="left" :show-overflow-tooltip="true">
            <template slot-scope="scope">
              {{ scope.row.local_variable_result }}
            </template>
          </el-table-column>
          <el-table-column label="描述" align="left">
            <template slot-scope="scope">
              {{ scope.row.local_variable_description }}
            </template>
          </el-table-column>
          <el-table-column label="username" align="left">
            <template slot-scope="scope">
              {{ scope.row.username }}
            </template>
          </el-table-column>
          <el-table-column align="left" prop="created_at" label="update_time">
            <template slot-scope="scope">
              <span>{{ scope.row.update_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="left" prop="created_at" label="create_time">
            <template slot-scope="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="action" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="edit_dialog(scope.row.local_variable_id)">编辑</el-button>
              <el-button type="danger" size="small" @click="del_dialog(scope.row.local_variable_id)">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination
          background
          :current-page="var_page.current_page"
          :page-sizes="[10, 20, 50]"
          :page-size="var_page.size_page"
          layout="total, sizes, prev, pager, next, jumper"
          :total="case_total"
          style="float: left; padding: 10px"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>
    <div style="padding: 50px">
      <el-dialog
        title="新增变量"
        :visible.sync="add_var_dialog"
        width="40%"
      >
        <el-form ref="form" :model="var_form" label-width="100px">
          <el-form-item label="变量名称：">
            <el-input v-model="var_form.local_variable_name" placeholder="请输入变量名称， 例如： ${xxx}" />
          </el-form-item>
          <el-form-item label="变量结果：">
            <el-input v-model="var_form.local_variable_result" />
          </el-form-item>
          <el-form-item label="变量描述：">
            <el-input v-model="var_form.local_variable_description" />
          </el-form-item>
          <el-form-item>
            <div v-show="1 === number">
              <el-button v-if="create_var" type="primary" style="float: right" @click="add_var">立即创建</el-button>
            </div>
            <div v-show="2 === number">
              <el-button v-if="create_var" type="primary" style="float: right" @click="edit_var">保存</el-button>
            </div>
          </el-form-item>
        </el-form>
      </el-dialog>
    </div>
    <div>
      <el-dialog
        title="提示"
        :visible.sync="del_var_dialog"
        width="18%"
      >
        <span>变量删除确认后，即可删除</span>
        <span slot="footer" class="dialog-footer">
          <el-button @click="del_var_dialog = false">取 消</el-button>
          <el-button type="primary" @click="del_var">确 定</el-button>
        </span>
      </el-dialog>
    </div>
  </div>
</template>
<script>
import { del_localVariable, editlocalVariable, get_variable, getlocalVariable } from "@/api/variable";

export default {
  name: "VariableList",
  data() {
    return {
      del_var_dialog: false,
      number: null,
      var_id: null,
      table_data: [],
      add_var_dialog: false,
      create_var: true,
      var_page: {
        local_variable_name: "",
        current_page: 1,
        size_page: 10,
      },
      case_total: 0,
      var_form: {

      }
    }
  },
  created() {
    this.getvar_list()
    this.is_login()
  },
  methods: {
    is_login() {
      // eslint-disable-next-line no-prototype-builtins
      if (localStorage.hasOwnProperty("user_id") === false || localStorage.getItem("user_id") === '') {
        this.$router.push("/login")
        this.$message.error("未登录，请前往登录")
      }
    },
    // 页签-条/页 跳转
    handleSizeChange(val) {
      this.var_page.size_page = val
      this.getvar_list()
    },
    // 底部页签跳转
    handleCurrentChange(val) {
      this.var_page.current_page = val
      this.getvar_list()
    },
    getvar_list() {
      const req = this.var_page
      req.user_id = localStorage.getItem("user_id")
      getlocalVariable(req).then(res => {
        if (res.data.code === 200) {
          this.table_data = res.data.content
          this.case_total = res.data.case_total
          this.var_page.current_page = res.data.current_page
          this.var_page.size_page = res.data.size_page
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        }
      })
    },
    edit_dialog(local_variable_id) {
      this.number = 2
      this.add_var_dialog = true
      this.var_id = local_variable_id
      get_variable({ "var_id": local_variable_id, "user_id": localStorage.getItem("user_id") }).then(res => {
        if (res.data.code === 200) {
          this.var_form = res.data.content[0]
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        }
      })
    },
    add_dialog() {
      this.var_form = {
        local_variable_name: "",
        local_variable_result: "",
        local_variable_description: ""
      }
      this.number = 1
      this.add_var_dialog = true
    },
    add_var() {
      const req = this.var_form
      req.local_variable_name = this.var_form.local_variable_name
      req.local_variable_result = this.var_form.local_variable_result
      req.local_variable_description = this.var_form.local_variable_description
      req.user_id = Number(localStorage.getItem("user_id"))
      editlocalVariable(this.var_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_var_dialog = false
          this.getvar_list()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    edit_var() {
      const req = this.var_form
      req.var_id = this.var_id
      req.local_variable_name = this.var_form.local_variable_name
      req.local_variable_result = this.var_form.local_variable_result
      req.local_variable_description = this.var_form.local_variable_description
      req.user_id = Number(localStorage.getItem("user_id"))
      editlocalVariable(this.var_form).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.add_var_dialog = false
          this.getvar_list()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    del_dialog(var_id) {
      this.del_var_dialog = true
      this.var_id = var_id
    },
    del_var() {
      const req = this.var_form
      req.var_id = this.var_id
      req.user_id = Number(localStorage.getItem("user_id"))
      del_localVariable(req).then(res => {
        if (res.data.code === 200) {
          this.$message.success(res.data.message)
          this.del_var_dialog = false
          this.getvar_list()
        } else if (res.data.code === 1001) {
          this.$message.error(res.data.message)
          this.$router.push("/login")
        } else {
          this.$message.error(res.data.message)
        }
      })
    }
  }
}
</script>

<style lang="scss">
  .el-tooltip__popper,.el-tooltip__popper.is-dark{
    background:rgb(48, 65, 86) !important;
    color: #fff !important;
    line-height: 22px;
  }
.el-tooltip__popper {
    max-width: 90%;
}
</style>
